<template>
  <view class="home__container">

    <!-- 地图 -->
    <view class="home-map__warpper" ref="mapWarpper">
      <amapCustom ref="amapRef" root-id="home-amap__container" />
    </view>

    <!-- 头像 -->
    <view class="home-avatar__warpper" @click="handleClickAvatar">
      <uv-avatar v-if="userInfo?.id" src="https://cdn.uviewui.com/uview/album/1.jpg"></uv-avatar>

      <uv-button v-else type="primary" :plain="true" :hairline="true" text="点击登录"></uv-button>
    </view>

    <!-- 侧边功能条 -->
    <view class="home-side-bar__warpper">
      <!-- 分享 -->
      <uv-icon class="fit mb-20" v-if="userInfo?.id" name="share-square" size="28"
        @click="handleShare(mapWarpper?.$el)"></uv-icon>
      <!-- 搜索 -->
      <uv-icon class="fit mb-20" @click="popupFlexRef?.open()" name="/static/flag.svg" size="28"></uv-icon>

      <!-- 自适应视野 -->
      <uv-icon class="fit" @click="amapRef?.setFitView" name="/static/auto.svg" size="28"></uv-icon>
      <!-- 朋友 -->
      <navigator class="mt-20" url="/pages/friend/friend" open-type="navigate" hover-class="navigator-hover">
        <uv-icon class="fit" name="account-fill" size="28"></uv-icon>
      </navigator>

    </view>

    <!-- 搜索box -->
    <popupFlex ref="popupFlexRef"
      style="--popup-flex-container-height-max:90vh;--popup-flex-container-height-min:0vh;z-index: 162;">
      <template #header>
        <view class="home-search__input-warpper mlr-40 mt-20">
          <uv-input @clear="handleClearInput" @input="handleSearch" clearable v-model="searchKeyRef"
            placeholder="搜索你去过的地方">

          </uv-input>
        </view>
      </template>

      <template #default>
        <view class="home-search__warpper plr-20">
          <view class="home-search__warpper-panel">
            <spacePanel @add-marker="handleAddMarkerToMap" @write-journal="handleWriteJournal"
              @center-change="setCenter" :pois="poiList.pois" />
          </view>
        </view>
      </template>
    </popupFlex>

    <!-- 日记列表/添加日记 -->
    <view class="home-popup__warpper">
      <spacePopup ref="spacePopupRef" @add-marker="handleAddMarkerToMap" v-bind="state.activeMarker?.poi" />
    </view>

    <!-- 用户信息 -->
    <uv-popup ref="popupRef" mode="bottom" class="p-20">
      <view class="p-28 pb-40">
        <view class="home-info__warpper mb-20">
          <view class="home-info__avatar ">
            <uv-avatar class="mr-20" src="https://cdn.uviewui.com/uview/album/1.jpg" size="50"></uv-avatar>
            <view class="home-info__desc">
              <text class="home-info__nickname">昵称: {{ userInfo?.nickname }}</text>
              <uv-tags style="width: 100rpx;" :text="'ID: ' + userInfo?.id" plain size="mini" type="warning"></uv-tags>
            </view>
          </view>

          <view class="home-info__operater">
            <uv-button type="error" @click="handleLogout" text="退出登录"></uv-button>
          </view>
        </view>
        <text class="home-info__email">邮箱(账号)：{{ userInfo?.email }}</text>
      </view>
      <view class="pl-28 ptb-12 home-official-info">
        <a class="group" target="_blank"
          href="https://qm.qq.com/cgi-bin/qm/qr?k=3bQSoywTr1j8y1dI3r_9shBlUckq6wms&jump_from=webapi&authKey=mN7u2YIpXzq9XyjF4Ei9am3KNR88BHCFzU/4opVbMxpMDv0AqjYbW/Opu41JPl72"><img
            border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Flaging-每一站都有个故" title="Flaging-每一站都有个故">
          <!-- <uv-icon name="qq-fill"></uv-icon> -->
          : 694248382</a>
      </view>
    </uv-popup>

    <!-- 分享图片 -->
    <share-cover v-if="shareConfig.link" v-bind="shareConfig"></share-cover>

  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useMarker from "./useMarker"
import useSearch from "./useSearch"
import useSpacePanel from "./useSpacePanel"
import { useUserStore } from '@/stores/useUserStore'
import { useMarkerStore } from '@/stores/useMarkerStore'
import useUserInfo from "./useUserInfo"
import SpacePanel from '@/components/spacePanel/spacePanel.vue';
import useInit from "./useInit"
import useJournal from './useJournal'
import { storeToRefs } from 'pinia'
import type { AMapCustomExposed } from '@/components/amapCustom/types'
import PopupFlex from '@/components/popupFlex/popupFlex.vue'
import type { IPopupFlexExposed } from '@/components/popupFlex/types'
import useShare from './useShare'

const userStore = useUserStore()
const markerStore = useMarkerStore()
const { logout } = userStore
const { userInfo } = storeToRefs(userStore)
const { state } = storeToRefs(markerStore)

// map 地图的 exposed
const amapRef = ref<AMapCustomExposed | null>(null)

useMarker(amapRef)

const {
  handleWriteJournal
} = useJournal()

const popupFlexRef = ref<IPopupFlexExposed | null>(null);

// spacePanel
const {
  poiList,
  setCenter,
  handleAddMarkerToMap
} = useSpacePanel(amapRef, handleWriteJournal, popupFlexRef)

// search 
const {
  searchKeyRef,
  handleSearch,
  handleClearInput,
} = useSearch(amapRef, poiList)

const {
  popupRef,
  handleClickAvatar,
  handleLogout
} = useUserInfo(userInfo, logout)

useInit(amapRef, popupFlexRef)

const mapWarpper = ref<Element | null>(null)

const { handleShare, shareConfig } = useShare()

</script>

<style lang="scss">
@import "../../styles/mixin/index.scss";

@import "./index.scss";
</style>
